<template>
	<view class="flex_r operate-box" v-if="show" :style="[Style]" @click="show = false">
		<view :class="{ flex1: isSelf }" style="transition: all 0.2s"></view>
		<view class="flex_r operate">
			<view class="flex_c_c size_white operate-item" v-for="(item, index) in list" :key="index" @click.stop="onClick(item)" v-if="item.icon">
				<view class="operate-item-icon">
					<image class="img" :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="text_24">
					{{ item.title }}
				</view>
			</view>
			<view class="operate-str" :style="[StyleStr]"></view>
		</view>
	</view>
</template>

<script>
import { 自己的信息 } from '@/utils/test';
import { getLocation, show } from '@/utils/chat.js';
const transmit = {
	type: 'transmit',
	icon: '',
	title: '转发'
};
const copy = {
	type: 'copy',
	icon: '',
	title: '复制'
};
const hide = {
	type: 'hide',

	icon: '',
	title: '隐藏'
};
const quote = {
	type: 'quote',
	icon: '',
	title: '引用'
};
const thank = {
	type: 'thank',
	icon: '',
	title: '谢谢'
};
const map = {
	type: 'map',
	icon: '',
	title: '导航'
};
const deletex = {
	type: 'delete',
	icon: '',
	title: '删除'
};

const add_emoji = {
	type: 'add_emoji',
	icon: '',
	title: '添加'
};

export default {
	data() {
		return {
			show: false,
			item: {},
			list: [],
			style: {},
			styleStr: {}
		};
	},
	computed: {
		Style() {
			const style = this.style;
			return style;
		},
		StyleStr() {
			const style = this.styleStr;
			style.transition = 'all 0.2s';
			return style;
		},
		// 是否本人isMy
		isSelf() {
			const { member_id = '' } = 自己的信息;
			return this.item.senderId === `${member_id}`;
		}
	},
	methods: {
		open(item, e) {
			this.item = item;
			this.init(item);
			let top = e.top;
			let title = this.list[this.list.length - 1].title;
			let length = this.list.length;
			if (!title) {
				length = length - 1;
			}
			if (length >= 5) {
				top = e.top - uni.upx2px(100);
			}
			this.style = {
				top: `${top - uni.upx2px(160)}px`
			};
			const value = (e.right - e.left) / 2 + uni.upx2px(122);
			this.styleStr = {
				top: `${e.top - uni.upx2px(31)}px`,
				left: `${value + uni.upx2px(122)}px`
			};
			if (this.isSelf) {
				this.styleStr = {
					top: `${e.top - uni.upx2px(31)}px`,
					right: `${value}px`
				};
			} else {
				this.styleStr = {
					top: `${e.top - uni.upx2px(31)}px`,
					left: `${value}px`
				};
			}
			this.show = true;
		},
		init(item) {
			let retractx = {
				type: 'retractx',
				icon: '',
				title: '撤回'
			};
			const MAX_RECALLABLE_TIME = 5 * 60 * 1000; //3分钟以内的消息才可以撤回;最长只能撤回4小时内的消息。
			if (Date.now() - item.timestamp < MAX_RECALLABLE_TIME) {
				const { member_id = '' } = 自己的信息;
				if (item.status === 'success' && item.senderId === `${member_id}`) {
					// 可撤回
				} else {
					retractx = {};
				}
			} else {
				retractx = {};
			}
			let list = [quote, hide, deletex];
			if (item.type === 'text' || item.type === 'text_quote') {
				list.unshift(copy);
			} else if (item.type === 'red_envelope') {
				list.unshift(thank);
			} else if (item.type === 'map') {
				list.unshift(map);
			} else if (item.type === 'emoji_pack') {
				list.unshift(add_emoji);
			}
			// 语音和红包不可转发
			if (item.type !== 'audio' && item.type !== 'red_envelope') {
				list.unshift(transmit);
			}
			// 红包不能撤回
			if (item.type != 'red_envelope') {
				list.push(retractx);
			}
			this.list = list;
		},
		close() {
			if (!this.show) return;
			this.show = false;
		},
		onClick(item) {
			switch (item.type) {
				case 'copy':
					// 复制
					uni.setClipboardData({
						data: this.item.payload.text,
						showToast: true,
						success: () => {}
					});
					break;
				case 'hide':
					// 删除/隐藏
					this.item.isHide = 1;
					break;
				case 'quote':
					// 引用
					this.quote();
					break;

				case 'retractx':
					// 撤回
					this.recallMessage();
					break;
				case 'thank':
					// 引用
					this.$emit('thank', this.item);
					break;
				case 'map':
					// 导航
					getLocation({
						name: this.item.payload.title,
						address: this.item.payload.address,
						latitude: this.item.payload.latitude,
						longitude: this.item.payload.longitude
					});
					break;
				case 'add_emoji':
					// 添加为表情包
					this.add_emoji();
					break;
				case 'delete':
					this.deleteMessage();
					break;
				case 'transmit':
					this.$emit('transmit', this.item);
					break;

				default:
					break;
			}
			this.close();
		},
		// 添加为表情包
		async add_emoji() {
			const { url, path = '' } = this.item.payload;
			const res = await this.API_collectEmoji(url, path);
			if (res) {
				uni.$emit('collectionEmoji', { url, path });
				uni.$off('collectionEmoji');
			}
		},
		// 引用
		quote() {
			this.$emit('quote', this.item);
		},
		// 撤回
		recallMessage() {
			console.log(this.item);
			uni.showModal({
				content: '撤回该条信息？',
				success: (res) => {
					if (res.confirm) {
						this.item.recalled = true
					} else if (res.cancel) {
					}
				}
			});
		},
		// 删除
		deleteMessage() {
			uni.showModal({
				content: '删除该条信息？不可恢复！',
				success: (res) => {
					if (res.confirm) {
						this.item.isHide = 1;
					} else if (res.cancel) {
					}
				}
			});
		},
		API_collectEmoji(url, path) {
			return new Promise((res) => {
				http.get(
					'Emoji/collectEmoji',
					{
						url,
						path
					},
					true,
					(r) => {
						if (r.data.code == 0) return res(r);
						return show(r.data.msg), res(false);
					}
				);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.operate-box {
	position: fixed;
	z-index: 9;
	left: 122rpx;
	width: calc(100vw - 244rpx);
	transition: all 0.2s;
}
.operate_box {
	flex-direction: row-reverse;
}
.operate {
	position: relative;
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 14rpx;
	background-color: #4c4c4c;
	max-width: 440rpx;
	box-shadow: rgba(76, 76, 76, 0.3) 0rpx 2rpx 20rpx;
	flex-wrap: wrap;
	.operate-item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 6rpx;
	}
	.operate-item {
		width: 100rpx;
		height: 100rpx;
	}
}
.operate-str {
	position: fixed;
	width: 18rpx;
	height: 18rpx;
	border-radius: 2px;
	transform: rotate(45deg);
	background-color: #4c4c4c;
	transition: all 0.2s;
}
</style>
